<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import api from '@/api'

const router = useRouter()

// 品牌列表数据
const brands = reactive([
  {
    id: 1,
    name: 'ZG-ONE',
    logo: 'flight',
    status: '阶段目标正在开启中',
    shareholders: 3761,
    progress: 56,
    color: 'var(--primary-color)'
  },
  {
    id: 2,
    name: '千岛湖景区开发',
    logo: 'flight',
    status: '阶段目标正在开启中',
    shareholders: 4434,
    progress: 49,
    color: 'var(--secondary-color)'
  }
])

// 股东收益数据
const dividend = ref({
  amount: 0.00000000000,
  remainingTasks: 10
})

// 页面加载完成后初始化
onMounted(() => {
  loadBrands()
  loadDividend()
})

// 加载品牌列表
const loadBrands = async () => {
  try {
    // 实际项目中应该从API获取数据
    // const response = await api.airplane.getBrands()
    // brands.value = response.data
    console.log('加载品牌列表')
  } catch (error) {
    console.error('加载品牌列表失败:', error)
  }
}

// 加载股东收益
const loadDividend = async () => {
  try {
    // 实际项目中应该从API获取数据
    // const response = await api.airplane.getDividend()
    // dividend.value = response.data
    console.log('加载股东收益')
  } catch (error) {
    console.error('加载股东收益失败:', error)
  }
}

// 处理品牌点击
const handleBrandClick = (brand) => {
  console.log('点击品牌:', brand.name)
  router.push({
    path: '/product-info',
    query: { brand: brand.name }
  })
}

// 处理成为股东按钮点击
const handleBecomeShareholderClick = (brand, event) => {
  // 阻止事件冒泡，避免触发卡片点击事件
  event.stopPropagation()
  
  console.log('点击成为股东:', brand.name)
  router.push({
    path: '/product-info',
    query: { brand: brand.name }
  })
}

// 处理广告点击
const handleAdClick = () => {
  Toast('广告功能开发中')
}

// 领取股东分红
const claimDividend = async () => {
  try {
    // 实际项目中应该调用API
    // await api.airplane.claimDividend()
    Toast('领取分红功能开发中')
  } catch (error) {
    console.error('领取分红失败:', error)
    Toast('领取失败，请稍后重试')
  }
}
</script>

<template>
  <div class="page-container">
    <div class="container">
      <!-- 头部信息 -->
      <div class="header-info">
        <div class="header-title">买飞机 当股东</div>
        <div class="header-subtitle">参与品牌打造，共享品牌收益</div>
        <div class="countdown">限时活动倒计时: 23:59:59</div>
        <img class="header-mascot" src="https://pan.feiwow.com/raw/files/9f8e76e6-3aed-41e0-bb68-ac8c995abfbe-1749241924810.png" alt="吉祥物">
      </div>
      
      <!-- 股东收益 -->
      <div class="dividend-card">
        <div class="dividend-title">我持有的股预计可分红</div>
        <div class="dividend-amount">¥{{ dividend.amount }}</div>
        <div class="ad-card" @click="handleAdClick">
          <div class="ad-content">
            <div class="ad-title">看视频领取股东分红</div>
            <div class="ad-subtitle">每日浏览重广告效(剩余{{ dividend.remainingTasks }}次)</div>
          </div>
          <img class="ad-image" src="https://pan.feiwow.com/raw/files/0918b246-4f79-4516-b300-dd70ddbb7834-1749241488302.jpeg" alt="视频广告">
        </div>
      </div>
      
      <!-- 全民做股东广告 -->
      <div class="ad-card">
        <div class="ad-content">
          <div class="ad-title">全民做股东</div>
          <div class="ad-subtitle">共建天空之城，共享时代财富</div>
        </div>
        <img class="ad-image" src="https://pan.feiwow.com/raw/files/9f8e76e6-3aed-41e0-bb68-ac8c995abfbe-1749241924810.png" alt="红包">
      </div>
      
      <!-- 品牌列表 -->
      <div 
        v-for="brand in brands" 
        :key="brand.id"
        class="brand-card"
        @click="handleBrandClick(brand)"
      >
        <div class="brand-header">
          <div class="brand-logo">
            <van-icon :name="brand.logo" :style="{ fontSize: '36px', color: brand.color }" />
          </div>
          <div class="brand-info">
            <div class="brand-name">{{ brand.name }}</div>
            <div class="brand-status">
              <van-icon name="lock" />
              {{ brand.status }}
            </div>
          </div>
        </div>
        <div class="brand-stats">
          <div class="brand-stat">
            <span>股东：</span>
            <span class="stat-value">{{ brand.shareholders }}位</span>
          </div>
          <div class="brand-stat">
            <span>进度：</span>
            <span class="stat-value">{{ brand.progress }}%</span>
          </div>
        </div>
        <van-button 
          type="primary" 
          block 
          class="become-btn"
          @click="(event) => handleBecomeShareholderClick(brand, event)"
        >
          成为股东
        </van-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.container {
  padding: 20px 15px 80px;
}

/* 头部信息 */
.header-info {
  background-color: var(--primary-color);
  color: white;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.header-subtitle {
  font-size: 14px;
  opacity: 0.9;
}

.header-mascot {
  position: absolute;
  right: 0px;
  bottom: 0;
  width: 160px;
  height: 100px;
  object-fit: contain;
}

/* 倒计时 */
.countdown {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 8px 15px;
  border-radius: 20px;
  margin-top: 10px;
  display: inline-block;
}

/* 股东收益 */
.dividend-card {
  background-color: #FFF8E1;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}

.dividend-title {
  font-size: 16px;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.dividend-amount {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 广告卡片 */
.ad-card {
  background-color: var(--secondary-color);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  color: white;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.ad-content {
  flex: 1;
}

.ad-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.ad-subtitle {
  font-size: 14px;
  opacity: 0.9;
}

.ad-image {
  width: 80px;
  height: 80px;
  margin-left: 10px;
  border-radius: 8px;
  object-fit: cover;
}

/* 品牌卡片 */
.brand-card {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.brand-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.brand-logo {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-color: #FFF8E1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.brand-info {
  flex: 1;
}

.brand-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.brand-status {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--primary-color);
}

.brand-status .van-icon {
  margin-right: 5px;
}

.brand-stats {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.brand-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.stat-value {
  font-weight: bold;
  color: #333;
  margin-left: 5px;
}

.become-btn {
  border-radius: 5px;
  font-weight: bold;
}
</style>